<template>
  <div class="suammry">
      <span>全部任务( {{tasklist.length}} )</span>
      <span>已完成( {{tasklist.length-unFinishCount}} )</span>
      <span>未完成( {{unFinishCount}} )</span>
  </div>
</template>

<script setup>

import { defineProps } from 'vue'

//接收属性, 通过 defineProps 接收的属性就像是在当前组件中通过reactive定义的响应式数据一样可以直接使用.
var props = defineProps({
    tasklist: { type: Array },
    unFinishCount: { type: Number }
})

//console.log( props.tasklist );

</script>

<style scoped lang='scss'>
.suammry{
    display: flex;
    align-items: center;
    font-size: 14px;
    span{
        display: inline-block;
        padding: 5px 15px;
        border-radius: 5px;
        background-color: lightseagreen;
        margin: 10px 0;
        margin-right: 10px;
        color: white;
        &:nth-child(3){
            background-color: red;
        }
    }
}
</style>